<script setup>
import { toRefs, onMounted, ref, nextTick } from 'vue'
import moment from 'moment'
import { drawQRCode2, drawBarcode2 } from '../qrcode.js'

const props = defineProps({
  myid:{type:Number,default:0},
  isS: {type:Boolean,default:false},
  info:{type:Object,default:{}},
})

const myid = ref(props.myid)

const item = ref(props.info)
const idx = ref(myid.value)

onMounted(() => { 
    renderEle(item.value, idx.value) 
})

function renderEle(itm, index) {
  //条码
  let h = 285
  let height = h * 38 / 270
  let width = 1.7 * h / 270
  let fontsize = h * 16 / 270
  let canvasSF1 = document.getElementById('myCanvas'+myid.value)
  drawBarcode2(canvasSF1, itm['快递单号'], width, height, fontsize)

  //二维码
  height = h * 105 / 270
  width = h * 105 / 270 
  let canvasSF2 = document.getElementById('myCanvasQR'+myid.value)
  drawQRCode2(itm['二维码'], canvasSF2, width, height)
}


</script>
<template>
  <div id="video-show">
    <!-- 订单区域   -->
    <div class="orderblock">
      <div class='ordermap' :id="'ordermap'+myid">
        <div class='ordermap1'>
          电商标快
        </div>
        <div class='ordermap2'>
          客服热线95338
        </div>
        <div class='ordermap3'>
          已检视 {{ moment().format('YYYY-MM-DD HH:mm:ss') }}
        </div>
        <div class='ordermap4'>
          <canvas :id='"myCanvas"+myid'></canvas>
         
        </div>
        <div class='ordermap5'>

          <div class='ordermapl'>
            {{ item['快递单号'] }}
          </div>
          <div class='ordermapmid'>
            <div class='ordermapmid1'>
              {{ item['路由信息'] }}
            </div>
            <div class='ordermapmid2'>
              <img id="imgys" v-if="item['标识'] === '易碎'" style="width: 40px;height: 40px; position:absolute;top: -3px;left:6px;" src="./ys.jpg" alt="">
            </div>
            <div class='ordermapmid3'>
              <div class='ordermapmid3-text'>
                <div>
                  <span class='ordermapmidfont'>收</span>
                  <span class='ordermapmid3-text-shou2'>{{ item['收件人信息'] }}</span>
                </div>
                <div class='ordermapmid3-text-shou'>
                  {{ item['收货人地址'] }}
                </div>
              </div>
              <div class='ordermapmid3-code'>
                <canvas :id="'myCanvasQR'+myid"></canvas>
              </div>
            </div>
            <div class='ordermapmid4'>
              <span class='ordermapmidfont'>寄</span>
              <div class='ordermapmid4-text'>
                <div>
                  <span class='ordermapmid4-ji'>{{ item['寄件人信息'] }}</span>
                </div>
                <div class='ordermapmid4-ji'>
                  {{ item['寄件人地址'] }}
                </div>
              </div>
            </div>
            <div class='ordermapmid5'>
              {{ item['进港信息'] }}
            </div>
          </div>
          <div class='ordermapr'>
            {{ item['快递单号'] }}
          </div>
        </div>
        <div class='ordermap6'>
          <div>总件数</div>
          <div>{{ item['订单总数量'] }}</div>
          <div>{{ item['订单波次序号'] }}</div>
        </div>
        <div class='ordermap7'>
          {{ item['物料信息'] }}
        </div>
        <div class='ordermap8' v-if="props.isS">
          第{{ item['打印次数']+1 }}次打印 <span>{{ moment().format('YYYY-MM-DD HH:mm:ss') }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang='scss'>
$w: 285px;
$h: $w * 1.8185;
.orderblock {
  display: flex;
}

.ordermap {
  width: $w;
  height: $h;
  box-sizing: border-box;
  font-size: calc($w * 12 / 270);
  font-weight: bolder;

  .ordermap1 {
    font-size: calc($w * 24 / 270);
    text-align: right;
  }

  .ordermap2 {
    font-size: calc($w * 10 / 270);
    text-align: left;
    margin-left: calc($w * 50 / 270);
  }

  .ordermap3 {
    font-size: calc($w * 10 / 270);
    text-align: center;
  }

  .ordermap4 {
    text-align: center;
  }

  .ordermap5 {
    display: flex;

    .ordermapl {
      width: calc($w * 10 / 270);
      height: calc($w * 300 / 270);
      font-size: calc($w * 11 / 270);
      word-break: break-word;
      font-weight: bold;
      margin-right: calc($w * 4 / 270);
      position: relative;
      top: calc($w * -45 / 270);
    }

    .ordermapmid {
      width: calc($w * 250 / 270);
      height: calc($w * 300 / 270);
      border: calc($w * 1 / 270) solid black;
      box-sizing: border-box;

      .ordermapmidfont {
        font-size: calc($w * 19 / 270);
      }

      .ordermapmid1 {
        height: calc($w * 50 / 270);
        border-bottom: calc($w * 1 / 270) solid black;
        font-size: calc($w * 17 / 270);
        line-height: calc($w * 50 / 270);
        text-align: center;
      }

      .ordermapmid2 {
        height: calc($w * 35 / 270);
        border-bottom: calc($w * 1 / 270) solid black;
        position: relative;
      }

      .ordermapmid3 {
        height: calc($w * 122 / 270);
        border-bottom: calc($w * 1 / 270) solid black;
        display: flex;
        justify-content: space-between;

        .ordermapmid3-text {
          width: calc($w * 140 / 270);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

        .ordermapmid3-code {
          width: calc($w * 105 / 270);
          display: flex;
          align-items: center;
        }

        .ordermapmid3-text-shou {
          text-align: center;
          font-size: calc($w * 11 / 270);
        }

        .ordermapmid3-text-shou2 {
          margin-left: calc($w * 5 / 270);
          font-size: calc($w * 12.5 / 270);
        }
      }

      .ordermapmid4 {
        height: calc($w * 55 / 270);
        display: flex;

        .ordermapmid4-text {
          text-align: center;
        }

        .ordermapmid4-ji {
          font-size: calc($w * 11 / 270);
        }
      }

      .ordermapmid5 {
        margin-left: calc($w * 15 / 270);
        font-size: calc($w * 21 / 270);
      }
    }

    .ordermapr {
      width: calc($w * 10 / 270);
      height: calc($w * 300 / 270);
      font-size: calc($w * 11 / 270);
      word-break: break-word;
      font-weight: bold;
      margin-left: calc($w * 4 / 270);
      position: relative;
      top: calc($w * -45 / 270);
    }

  }

  .ordermap6 {
    display: flex;
    justify-content: space-around;
  }

  .ordermap7 {
    white-space: nowrap;
  }
  .ordermap8{
    span{
      margin-left: calc($w * 10 / 270);
    }
  }
}

</style>
